/* eslint-disable @typescript-eslint/no-unused-vars */
import { useEffect, useRef, useState } from 'react';
import { EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProColumns,
  ProTable,
  ModalForm,
  ProFormText,
  ProFormTextArea,
  ProForm,
  ProFormSelect,
  // ProFormSelect,
} from '@ant-design/pro-components';
import { Button, Form, Popconfirm, Space } from 'antd';
import {
  loadDataAPI,
  addOneAPI,
  loadOneByIdAPI,
  modifyByIdAPI,
  deleteByIdAPI,
  deleteManyByIds,
  loadAllMedicinesAPI,
} from '@/services/illfenlei';

import { dalImg } from '@/utils/tools';
import MyUpload from '@/components/MyUpload';
import MyEditor from '@/components/MyEditor';
function IllFenLei() {
  const actionRef = useRef<any>();

  const [currentId, setCurrentId] = useState('');

  const [myForm] = ProForm.useForm();

  const [isShow, setIsShow] = useState(false);

  const [selRows, setSelRows] = useState<any>([]);

  const [imageUrl, setImageUrl] = useState('');

  const [html, setHtml] = useState('');

  const [medicines, setMedicines] = useState([]);

  useEffect(() => {
    loadAllMedicinesAPI().then((res: any) => {
      setMedicines(
        res.data.list.map((item: any) => {
          return {
            label: item.name,
            value: item.id,
          };
        }),
      );
    });
  }, []);

  useEffect(() => {
    if (!isShow) {
      setCurrentId('');
      setImageUrl('');
      setHtml('');
    }
  }, [isShow]);

  const cols: ProColumns[] = [
    {
      title: '序号',
      align: 'center',
      hideInSearch: true,
      render(a, b, c) {
        return c + 1;
      },
    },
    {
      title: '药品分类',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '图片',
      align: 'center',
      width: 200,
      hideInSearch: true,
      render(v: any) {
        //console.log(v);
        return <img className="hosimg" src={dalImg(v.image)} />;
      },
    },

    {
      title: '简介',
      align: 'center',
      hideInSearch: true,
      /* render(v: any) {
        return <span>{v.category?.desc}</span>;
      }, */
      dataIndex: 'desc',
    },
    {
      title: '操作',
      align: 'center',
      hideInSearch: true,
      render(val: any) {
        return (
          <Space>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={async () => {
                const info = await loadOneByIdAPI(val.id);
                myForm.setFieldsValue(info.data);
                setIsShow(true);
                setCurrentId(val.id);
                setImageUrl(info.data.image);
                // setHtml(info.data.content);
              }}
            />
            <Popconfirm
              title="是否确认删除"
              onConfirm={async () => {
                await deleteByIdAPI(val.id);
                actionRef.current?.reload();
              }}
            >
              <Button type="primary" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        rowSelection={{
          onChange(selectedRowKeys) {
            setSelRows(selectedRowKeys);
          },
        }}
        actionRef={actionRef}
        bordered
        columns={cols}
        request={loadDataAPI}
        toolBarRender={() => {
          const tools = [
            <Button
              type="primary"
              icon={<PlusCircleOutlined />}
              key={1}
              onClick={() => {
                setIsShow(true);
              }}
            />,
          ];
          if (selRows.length > 0) {
            tools.push(
              <Button
                type="primary"
                danger
                key={2}
                onClick={() => {
                  deleteManyByIds(selRows.join(','));
                  actionRef.current?.reload();
                  setSelRows([]);
                }}
              >
                批量删除
              </Button>,
            );
          }
          return tools;
        }}
      />
      <ModalForm
        form={myForm}
        title="编辑"
        open={isShow}
        onOpenChange={setIsShow}
        modalProps={{
          maskClosable: false,
          destroyOnClose: true,
        }}
        onFinish={async (val) => {
          if (currentId) {
            await modifyByIdAPI(currentId, { ...val, image: imageUrl });
          } else {
            await addOneAPI({ ...val, image: imageUrl });
          }
          setIsShow(false);
          actionRef.current?.reload();
        }}
      >
        <ProFormText
          label="疾病分类"
          placeholder="请输入疾病分类"
          name="name"
          rules={[
            {
              required: true,
              message: '疾病分类不能为空',
            },
          ]}
        />
        <ProForm.Item label="主图">
          <MyUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
        </ProForm.Item>
        <ProFormTextArea placeholder="请输入简介" name="desc" label="简介" />
        {/* <ProForm.Item label="详情">
          <MyEditor html={html} setHtml={setHtml} />
        </ProForm.Item> */}
      </ModalForm>
    </PageContainer>
  );
}

export default IllFenLei;
